<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">选择专家</text>
		</uni-nav-bar>
		<view class="head flex-r ac" :class="navBorder ? 'navborder':''">
			<uni-search-bar 
				class="search-bar"
				placeholder="请输入您要搜索的专家"
				bgColor="#F2F5FA"
				radius="36"
				@confirm="search" 
				:focus="true" 
				v-model="searchValue"
				cancelButton="none"
			>
			<template v-slot:searchIcon>
				<image class="search-icon" src="@/public/images/public/sy_ss.png" mode="aspectFit"></image>
			</template>
			<template v-slot:clearIcon>
				<image class="clear-icon" src="@/public/images/public/sy_qc.png" mode="aspectFit"></image>
			</template>
			</uni-search-bar>
			<text class="search-btn" @tap="search">搜索</text>
		</view>
		<view class="body">
			<view class="flex-c" v-if="expertList[0]">
				<view class="expert flex-r ac" v-for="(item, index) in expertList" :key="item.expertId" @tap="selectExpert(item)">
					<view class="author-image border-round">
						<image class="inheritwh border-round" :src="item.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></image>
					</view>
					<view class="author-info flex-c">
						<text class="info-name text-primary">{{item.expertName}}</text>
						<view class="info-detail text-small color-grey text-hidden" v-if="item.remark">{{item.remark}}</view>
					</view>
					<image class="select-icon" v-show="item.expertId !== radioValue" src="@/public/images/public/xz_wzz.png" mode="aspectFit"></image>
					<image class="select-icon" v-show="item.expertId === radioValue" src="@/public/images/public/ysctsc.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="list-end flex-r mt20 mb20" v-if="isEnd && expertList[0]">
				<text>已经到底啦～</text>
			</view>
		</view>
		<view class="foot">
			<view class="submit-box flex-r ac">
				<button type="default" :class="{'active': radioValue}" @tap="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expertList: [],
				searchValue: null,
				radioValue: null,
				expert: null,
				pageNo: 1,
				isEnd: false,
				navBorder: false
			}
		},
		onLoad() {
			let searchKey = uni.getStorageSync('searchExpertKey')
			if(searchKey){
				this.searchValue = searchKey
				this.getExpertInfo(1)
			}else{
				this.searchValue = ''
				this.getExpertInfo(1)
			}
		},
		onReachBottom() {
			if(!this.isEnd){
				this.pageNo += 1
				this.getExpertInfo(this.pageNo)
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//搜索
			search() {
				console.log(this.searchValue)
				if(this.searchValue){
					uni.setStorageSync('searchExpertKey', this.searchValue)
					this.getExpertInfo(1)
				}else{
					uni.showToast({
						title: '请输入您要搜索的专家',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//选择专家
			selectExpert(expert) {
				if(this.radioValue === expert.expertId){
					this.radioValue = null
					this.expert = null
				}else{
					this.radioValue = expert.expertId
					this.expert = expert
				}
			},
			//提交检测
			submit() {
				if(this.radioValue && this.expert){
					uni.$emit('selectExpert', {
						'expert': this.expert
					})
					this.$goBack(1)
				}else{
					uni.showToast({
						title: '请选择专家',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//获取专家信息
			getExpertInfo(pageNo) {
				this.$http.get({
					url: '/api/complaints/queryExpertInfoList',
					data: {
						pageNo,
						pageSize: 10,
						searchValue: this.searchValue,
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(pageNo == 1){
							this.expertList = data.result.records
						}else{
							this.expertList.push(...data.result.records)
						}
						this.isEnd = pageNo >= data.result.pages
					}else{
						uni.showToast({
							title: '没有找到您搜索的专家',
							icon: 'none',
							duration: 2000
						})
					}
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none',
						duration: 2000
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		max-width: $max-width;
		margin: $pc-margin;
		width: 750rpx;
		height: 96rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		position: fixed;
		top: $navbar-height;
		z-index: 10;
		.search-bar{
			flex: 2;
			padding: 0;
			/deep/ .uni-searchbar__box{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 72rpx;
				.uni-searchbar__box-search-input{
					font-size: 26rpx;
					.input-placeholder{
						color: #B3B3B3;
					}
				}
				.uni-searchbar__box-icon-clear{
					height: 33rpx;
				}
			}
			.search-icon{
				width: 33rpx;
				height: 33rpx;
			}
			.clear-icon{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.search-btn{
			margin-left: 30rpx;
			font-size: 32rpx;
		}
	}
	.body{
		flex: 2;
		margin: 116rpx 0 calc(120rpx + var(--safe-area-inset-bottom));
		.expert{
			padding: 28rpx 20rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EDEDED;
			.author-image{
				width: 88rpx;
				height: 88rpx;
				background-color: #FFFFFF;
				background-size: 100%;
			}
			.author-info{
				flex: 2;
				margin-left: 20rpx;
				.info-name{
					font-weight: 500;
				}
				.info-detail{
					margin-top: 20rpx;
					max-width: 500rpx;
				}
			}
			.select-icon{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.expert:last-child{
			border: none;
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding-bottom: var(--safe-area-inset-bottom);
		.submit-box{
			margin: 0;
			height: 120rpx;
			border-top: 1rpx solid #EDEDED;
			box-sizing: border-box;
			padding: 0 20rpx;
		}
	}
</style>
